<template>
	<view class="classnext">
		<view class="item-box">
			<view class="i-wrap">
				<view class="i-title">封面图片（选填）</view>
				<view class="img-box">
					<image class="i-img" :src="headimg.length>0?headimg[headimg.length-1]:'../../../static/img/99.png'"></image>
					<imgselect v-model="headimg">
						<view slot="main" class="btn-img-select">更换图片</view>
					</imgselect>
				</view>
			</view>
		</view>
		<view class="item-box">
			<view class="i-wrap">
				<view class="i-title">老师姓名（选填）</view>
				<view class="i-input-wx"><input :cursor-spacing="20" class="input-wx" v-model="saveInfo.tch_name" maxlength="20" placeholder="需要帮助时方便联系" placeholder-class="input-wx-pl"/></view>
			</view>
		</view>
		<view class="item-box">
			<view class="i-wrap">
				<view class="i-title">手机号（选填）</view>
				<view class="i-input-wx"><input type="number" maxlength="11" :cursor-spacing="20" class="input-wx" v-model="saveInfo.phonenum"  placeholder="需要帮助时方便联系" placeholder-class="input-wx-pl"/></view>
			</view>
		</view>
		<view class="item-box">
			<view class="i-wrap">
				<view class="i-title">老师介绍（选填）</view>
				<view><textarea :cursor-spacing="20" v-model="saveInfo.lsjianjie" class="i-textarea"/></view>
			</view>
		</view>
		<view class="item-box">
			<view class="i-wrap">
				<TheClassDesc v-model="BJjianjie"></TheClassDesc>
			</view>
		</view>
		<vs-cssloading :show="show"></vs-cssloading>
		<view class="btn-save">
			<vs-button @click="fnSaveInfoClick" >创建班级</vs-button>
		</view>
	</view>
</template>

<script>
	import TheClassDesc from '../../compoments/TheClassDesc.vue'
	import imgselect from '../../compoments/img-select.vue'
	function dd(){
		return new Promise(resolve=>{
			console.log('777')
			resolve('ss')
		})
	}
	
	export default {
		components:{
			TheClassDesc,imgselect
		},
		
		data() {
			return {
				show:false,
				saveInfo:{
					tch_name:'',
					phonenum:'',
					lsjianjie:'',
					classnote:'',
					classnoteimg:'',
					classimg:''
				},
				BJjianjie:'',
				headimg:[],
				upimgs:{
					classimg:'',
					classnoteimg:''
				}
			}
		},
		computed:{
		},
		methods: {
			fnClickevent(e){
				console.log(8888)
			},
			fnUploader(imgurl,type){
				//console.log(type)
				return new Promise(resolve=>{
					uni.uploadFile({
						url:this.$http+'php/xcx_uploadimg.php', //仅为示例，非真实的接口地址
						filePath: imgurl,
						name: 'file',
						method:'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
						},
						formData: {
							userid:uni.getStorageSync('userInfo').userid
						},
						success: (res) => {
							console.log(res);
							this.saveInfo[type]=res.data
							resolve(res)
						}
					});
				})
			},
			fnSaveInfoClick(){
				this.show=true
				//console.log(uni.getStorageSync('userInfo'))
				// let classimg=this.headimg[0]
				// let classnoteimg=this.BJjianjie.imglist[0].imgurl[0]
				// console.log(this.BJjianjie.imglist)
				// console.log(this.headimg)
				let imgarr=[]
				if(this.headimg.length!=0){
					imgarr.push(this.fnUploader(this.headimg[this.headimg.length-1],'classimg'))
				}
				if(this.BJjianjie.imglist){
					//console.log(this.BJjianjie.imglist)
					if(this.BJjianjie.imglist.length!=0){
						imgarr.push(this.fnUploader(this.BJjianjie.imglist[0].imgurl[0],'classnoteimg'))
					}
				}
				console.log(imgarr)
				// let p1=this.fnUploader(this.headimg[0])
				// let p2=this.fnUploader(this.BJjianjie.imglist[0].imgurl[0])
			//	if(imgarr.length!=0){}
				Promise.all(imgarr).then((res)=>{
					//console.log('999')
					//console.log(res)
					if(this.BJjianjie.textlist){
						if(this.BJjianjie.textlist.length!=0){
							this.saveInfo.classnote=this.BJjianjie.textlist[0].desc
						}
					}
					//console.log(this.saveInfo)
					this.fnSaveInfoNext()
				})
				
				
				
				
				// console.log(this.headimg)
				// console.log(this.phonenum)
				// console.log(this.LSjianjie)
			//	console.log(this.BJjianjie)
			// 	let info={}
			// info.classimg=this.headimg[0]
			// info.teacherphone=this.phonenum
			// info.classnote=this.BJjianjie.textlist[0].desc
			// info.teachernote=this.LSjianjie
			// info.classnoteimg=this.BJjianjie.imglist[0].imgurl[0]
			// info=Object.assign({},info,this.$store.state.classInfo)
			// console.log(info)
			
			
			
			
			// {banji: "乐器"
			// classimg: "http://tmp/wx4ef8e1fceda209c2.o6zAJs4vLgbb1K4qDhZ33I_C8ouc.GyFRsImgGIfidb35a8d5d204054ed2d64dfe1e0c783c.jpg"
			// classlevel: "艺术"
			// classname: "爱乐琴行"
			// classnote: "专为儿童开设进步班级"
			// classnoteimg: "http://tmp/wx4ef8e1fceda209c2.o6zAJs4vLgbb1K4qDhZ33I_C8ouc.GhrGELxtWisGdb35a8d5d204054ed2d64dfe1e0c783c.jpg"
			// kemu: "艺术"
			// teachernote: "专业教育十年，经验丰富，成果显著"
			// teacherphone: "13333333333"
			// type: ""}
			
			},
			fnSaveInfoNext(){
				
				let info={
					userid:uni.getStorageSync('userInfo').userid,
					tch_nickname:uni.getStorageSync('userInfo').nickname,
					tch_headimg:uni.getStorageSync('userInfo').avatarurl
				}
				// console.log(this.saveInfo)
				// console.log(this.$store.state.classInfo)
				// console.log(uni.getStorageSync('userInfo'))
				
				let params=Object.assign({},this.$store.state.classInfo,this.saveInfo,info)
				console.log(params)
				uni.request({
					url:this.$http+ 'php/xcx_saveclassinfo.php', //仅为示例，并非真实接口地址。
					data:params,
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						if(res.data.status==200){
							this.$store.state.classInfo=res.data.data
							uni.redirectTo({
							    url: '../daka/daka'
							}); 
							setTimeout(()=>{
								
								this.$fun.toast('恭喜创建班级成功！','',true)
								
								this.show=false
							},1500)
						}else{
							this.show=false
							this.$fun.modal('创建班级失败，请重新创建！')
						}
					}
				})
				
			},
			fnHeadImgSelect(){
				this.headimg=[]
				console.log(this.headimg)
			}
		}
	}
</script>

<style lang="scss">
	.classnext{
		width: 100%;
		//padding-bottom: env(safe-area-inset-bottom);
		.item-box{
		//	background: #007AFF;
			display: flex;
			//flex-direction: column;
			justify-content: center;
			background-color: #fff;
			border-bottom: 1px solid #eee;
			margin-bottom: 10px;
			.i-textarea{
				height: 50px;
				padding: 0 0 10px 0;
				font-size: 14px;
				color: $vx-fontcolor-2;
				
			}
			.i-wrap{
				width: 90%;
				color: #666;
				//background-color: #2C405A;
				.i-title{
					font-size: 16px;
					padding: 10px 0;
				}
				.img-box{
					padding: 15px 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					.i-img{
						width: 120px;
						height: 120px;
					}
					.btn-img-select{
						width: 100px;
						height: 30px;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 14px;
						color: #fff;
						margin-top: 15px;
						border-radius: 4px;
						background-color: #ff9900;
						&:active{
							background-color: #ffae33;
						}
					}
				}
				.i-input-wx{
					padding: 0 0 10px 0;
					.input-wx{
						height: 30px;
						color: $vx-fontcolor-2;
						font-size: 16px;
					}
					.input-wx-pl{
						font-size: 12px;
					}
				}
			}
		}
		.btn-save{
			height: 45px;
			width: 50%;
			background-color: #ff9900;
			margin: 0 auto;
			margin-top: 10px;
			margin-bottom: 20px;
			border-radius: 4px;
			font-size: 16px;
			color: #fff;
			&:active{
				background-color: #ffae33;
			}
		}
		
	}

</style>
